<template>
    <div>
        <div v-for="items in newTableList">
            <div style="font-size: 12px;">COSTACO   {{items.portName}}</div>
            <h5 align="center">CHINA OCEAN SHIPPING TALLY COMPANY</h5>
            <h1 align="center">STATEMENT OF TALLY ACCOUNT</h1>
            <h5 align="center">({{items.type}})</h5>
            <el-row style="margin-top: 20px;">
                <el-col :span="6"><div class="grid-content bg-purple">Vessel:{{vessel}}{{items.tradeType == "I" ? "内贸" : ""}}</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">Voy:</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">Nationality:</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">Date of list:{{curDate}}</div></el-col>
            </el-row>
            <el-row style="margin-top: 10px;">
                <el-col :span="16"><div class="grid-content bg-purple">Tally commenced on:{{commencedDate}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple-light">Tally completed on:{{completedDate}}</div></el-col>
            </el-row>
            <table border="1" cellspacing="0" style="width: 800px;">
                <tr style="text-align: center">
                    <td rowspan="2">Tally Date</td>
                    <td rowspan="2">Ship</td>
                    <td rowspan="2">Voyage</td>
                    <td colspan="6">Count size</td>
                    <td rowspan="2">Quantity</td>
                    <td rowspan="2">Unit</td>
                    <td rowspan="2">Charging Rate</td>
                    <td rowspan="2">Amount</td>
                </tr>
                <tr style="text-align: center">
                    <td style="width: 65px;">20E</td>
                    <td style="width: 65px;">20F</td>
                    <td style="width: 65px;">40E</td>
                    <td style="width: 65px;">40F</td>
                    <td style="width: 65px;">45E</td>
                    <td style="width: 65px;">45F</td>
                </tr>
                <tr v-for="item in items.tableListO" style="text-align: center;">
                    <td>{{item.tallyDate}}</td>
                    <td>{{item.shipName}}</td>
                    <td>{{item.voyage}}</td>
                    <td>{{item.num20}}</td>
                    <td>{{item.num20W}}</td>
                    <td>{{item.num40}}</td>
                    <td>{{item.num40W}}</td>
                    <td>{{item.num45}}</td>
                    <td>{{item.num45W}}</td>
                    <td>{{item.feeNum}}</td>
                    <td>{{item.feeUnit}}</td>
                    <td style="text-align: right;">{{item.strFeeRate}}</td>
                    <td style="text-align: right;">{{item.money}}</td>
                </tr>
                <tr style="text-align: center;font-weight: bold;">
                    <td>Total</td>
                    <td></td>
                    <td></td>
                    <td>{{items.count20}}</td>
                    <td>{{items.count20W}}</td>
                    <td>{{items.count40}}</td>
                    <td>{{items.count40W}}</td>
                    <td>{{items.count45}}</td>
                    <td>{{items.count45W}}</td>
                    <td>{{items.feeNum}}</td>
                    <td></td>
                    <td></td>
                    <td style="text-align: right;">{{items.money}}</td>
                </tr>
                <tr style="text-align: center;">
                    <td colspan="8">Amount totalled(in words)</td>
                    <td></td>
                    <td colspan="4"></td>
                </tr>
            </table>
            <el-row>
                <el-col :span="6"><div class="grid-content bg-purple">in Charge:</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">Checked by:</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">Prepared by:{{loginUserName}}</div></el-col>
                <el-col :span="2"><div class="grid-content bg-purple-light">(Stamped)</div></el-col>
            </el-row>
            <div style="page-break-after:always"></div>
        </div>
    </div>
</template>

<script>
    import {printBalance} from "@/api/balance/balance";

    export default {
        name: "balance",
        data() {
            return {
                portName: ["果园港", "寸滩港", "玖龙港", "理文港", "万州港", "涪陵港", "新港", "长寿港"],
                table:[],
                tableI:[],
                vessel : null,
                curDate:null,
                commencedDate:null,
                completedDate:null,
                loginUserName:null,
                countOutput:{
                    count20 : "",
                    count40 : "",
                    count45 : "",
                    money: "",
                    feeNum : ""
                },
                countInput:{
                    count20 : "",
                    count40 : "",
                    count45 : "",
                    money: "",
                    feeNum : ""
                },
                newTableList:[

                ]
            }
        },
        created() {
            this.loadDataByNew()
        },
        methods: {
            loadDataByNew(){
                const id=this.$route.params.id
                printBalance({search_EQ_billId:id}).then(res=>{
                    this.vessel = res.data.accountUnit
                    this.curDate = res.data.curDateTime
                    this.commencedDate = res.data.tallyCommenced
                    this.completedDate =res.data.tallyCompleted
                    this.loginUserName = res.data.loginUserName
                    //存每个港口的数据
                    if (res.data.寸滩港 != undefined){
                        if (res.data.寸滩港.O != undefined && res.data.寸滩港.O.length > 0){
                            this.matchData(res.data.寸滩港.O,'寸滩', 'O')
                        }
                        if (res.data.寸滩港.I != undefined && res.data.寸滩港.I.length > 0){
                            this.matchData(res.data.寸滩港.I,'寸滩', 'I')
                        }
                        if (res.data.寸滩港.TSO != undefined && res.data.寸滩港.TSO.length > 0) {
                            this.matchData(res.data.寸滩港.TSO,'寸滩', 'O')
                        }
                        if (res.data.寸滩港.TSI != undefined && res.data.寸滩港.TSI.length > 0) {
                            this.matchData(res.data.寸滩港.TSI,'寸滩', 'I')
                        }
                        if (res.data.寸滩港.WO != undefined && res.data.寸滩港.WO.length > 0) {
                            this.matchData(res.data.寸滩港.WO,'寸滩', 'O')
                        }
                        if (res.data.寸滩港.WI != undefined && res.data.寸滩港.WI.length > 0) {
                            this.matchData(res.data.寸滩港.WI,'寸滩', 'I')
                        }
                        if (res.data.寸滩港.WTSO != undefined && res.data.寸滩港.WTSO.length > 0) {
                            this.matchData(res.data.寸滩港.WTSO,'寸滩', 'O')
                        }
                        if (res.data.寸滩港.WTSI != undefined && res.data.寸滩港.WTSI.length > 0) {
                            this.matchData(res.data.寸滩港.WTSI,'寸滩', 'I')
                        }
                    }
                    if (res.data.果园港 != undefined) {
                        if (res.data.果园港.O != undefined && res.data.果园港.O.length > 0){
                            this.matchData(res.data.果园港.O,'果园', 'O')
                        }
                        if (res.data.果园港.I != undefined && res.data.果园港.I.length > 0){
                            this.matchData(res.data.果园港.I,'果园', 'I')
                        }
                        if (res.data.果园港.TSO != undefined && res.data.果园港.TSO.length > 0){
                            this.matchData(res.data.果园港.TSO,'果园', 'O')
                        }
                        if (res.data.果园港.TSI != undefined && res.data.果园港.TSI.length > 0) {
                            this.matchData(res.data.果园港.TSI,'果园', 'I')
                        }
                        if (res.data.果园港.WO != undefined && res.data.果园港.WO.length > 0) {
                            this.matchData(res.data.果园港.WO,'果园', 'O')
                        }
                        if (res.data.果园港.WI != undefined && res.data.果园港.WI.length > 0) {
                            this.matchData(res.data.果园港.WI,'果园', 'I')
                        }
                        if (res.data.果园港.WTSO != undefined && res.data.果园港.WTSO.length > 0) {
                            this.matchData(res.data.果园港.WTSO,'果园', 'O')
                        }
                        if (res.data.果园港.WTSI != undefined && res.data.果园港.WTSI.length > 0) {
                            this.matchData(res.data.果园港.WTSI,'果园', 'I')
                        }
                    }
                    if (res.data.万州港 != undefined) {
                        this.matchData(res.data.万州港.O,'万州', 'O')
                        this.matchData(res.data.万州港.I,'万州', 'I')
                    }
                    if (res.data.玖龙港 != undefined) {
                        this.matchData(res.data.玖龙港.O,'玖龙', 'O')
                        this.matchData(res.data.玖龙港.I,'玖龙', 'I')
                    }
                    if (res.data.理文港 != undefined) {
                        this.matchData(res.data.理文港.O,'理文', 'O')
                        this.matchData(res.data.理文港.I,'理文', 'I')
                    }
                    if (res.data.涪陵港 != undefined) {
                        this.matchData(res.data.涪陵港.O,'涪陵', 'O')
                        this.matchData(res.data.涪陵港.I,'涪陵', 'I')
                    }
                    if (res.data.新港 != undefined) {
                        this.matchData(res.data.新港.O,'新港', 'O')
                        this.matchData(res.data.新港.I,'新港', 'I')
                    }
                    if (res.data.长寿港 != undefined) {
                        this.matchData(res.data.长寿港.O,'长寿', 'O')
                        this.matchData(res.data.长寿港.I,'长寿', 'I')
                    }
                    this.$nextTick(()=>{
                        window.print()
                        window.close();
                    })
                })
            },
            matchData(val, name, type){
                let tableArrayO = {}
                let count = 0
                let quantityCount = 0
                let count45 = 0
                let count40 = 0
                let count20 = 0
                let count45W = 0
                let count40W = 0
                let count20W = 0
                val.map(m => {
                    m.feeUnit = m.feeUnit.replace("月累计", "")
                    count45 = count45 + Number(m.num45)
                    count40 = count40 + Number(m.num40)
                    count20 = count20 + Number(m.num20)
                    count45W = count45W + Number(m.num45W)
                    count40W = count40W + Number(m.num40W)
                    count20W = count20W + Number(m.num20W)
                    count = count + Number(m.money)
                    quantityCount = quantityCount + Number(m.feeNum)
                })
                this.$set(tableArrayO, "tableListO", val)
                this.$set(tableArrayO, "portName", name)
                this.$set(tableArrayO, "count20", count20)
                this.$set(tableArrayO, "count40", count40)
                this.$set(tableArrayO, "count45", count45)
                this.$set(tableArrayO, "count45W", count45W)
                this.$set(tableArrayO, "count40W", count40W)
                this.$set(tableArrayO, "count20W", count20W)
                this.$set(tableArrayO, "money", count+".00")
                this.$set(tableArrayO, "feeNum", quantityCount)
                this.$set(tableArrayO, "type", type)
                this.$set(tableArrayO, "tradeType", (val== null || val == "" || val == undefined) ? "" : val[0].tradeType)
                this.newTableList.push(tableArrayO)
            }
        },
        filters: {
            filterDate(val) {
                return val ? val.substr(0, 10) : ''
            }
        }
    }
</script>

<style scoped>

</style>
